<template>
  <div>
    <el-radio-group v-model="mode.current" size="large">
      <el-radio-button label="Large" :value="mode.large" />
      <el-radio-button label="Small" :value="mode.small" />
      <el-radio-button label="Detail" :value="mode.detail" />
    </el-radio-group>

    <component
      :modelValue="modelValue"
      :is="mode.current"
      @action="handleAction"
    ></component>
  </div>
</template>

<script>
import MyListViewDetail from "./list_view_detail.vue";
import MyListViewLarge from "./list_view_large.vue";
import MyListViewSmall from "./list_view_small.vue";

export default {
  name: "files-list-view-multi",

  components: { MyListViewDetail, MyListViewLarge, MyListViewSmall },

  data() {
    return {
      mode: {
        current: "MyListViewSmall",
        detail: "MyListViewDetail",
        large: "MyListViewLarge",
        small: "MyListViewSmall",
      },
    };
  },

  methods: {
    handleAction(p) {
      this.$emit("action", p);
    },
  },

  mounted() {},

  unmounted() {},

  props: {
    modelValue: Object, // files-module-id
  },
};
</script>
